{% extends 'base.html' %}
{% block T_head %}

{% endblock %}

{% block T_body %}
<div class="container">
    <div>
      <ul class="nav nav-tabs nav-justified" id="index">
          {% for rating in rating_range %}
            {% if rating == 5%}
                <li class="active" ><a href="#{{ rating }}" data-toggle="tab">{{ rating }}分</a></li>
            {% else %}
                 <li><a href="#{{ rating }}" data-toggle="tab">{{ rating }}分</a></li>
            {% endif %}

          {% endfor %}
      </ul>
    </div>


    {% if user.is_authenticated %}
        <div class="tab-content" id="movies_content">
        {% for key, values in rating_list.items %}
            {% if key == 5 %}
                 <div class="tab-pane fade in active" id={{ key }}>
            {% else %}
                 <div class="tab-pane fade in" id={{ key }}>
            {% endif %}
                <ul class="figures_lists">
                {% for value in values %}
                <li class="list_item col-sm-6 col-md-3" >
                    <a class="figure" >
                        {% if key == 5 %}
                             <img src={{ value.poster_url }} alt={{ value.title }}>
                        {% else %}
                             <img src="" x-src={{ value.poster_url }} alt={{ value.title }}>
                        {% endif %}

                    </a>
                    <strong class="figure_title">
                    <a  target="_blank" href={{ value.url }}>{{ value.title }}</a>
                    </strong>
                </li>
                {% endfor %}
                </ul>
                </div>

        {% endfor %}
        </div>
    {% endif %}

    <script src="https://unpkg.com/vanilla-back-to-top@7.2.0/dist/vanilla-back-to-top.min.js"></script>
    <script>addBackToTop({
      diameter: 56,
      backgroundColor: 'rgb(255, 82, 82)',
      textColor: '#fff'
    })</script>
</div>
{% endblock %}